/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import {
    Button,
    Checkbox,
    Collapse,
    ConfigProvider,
    Dialog,
    Dropdown,
    Field,
    Form,
    Grid,
    Icon,
    Input,
    Loading,
    Menu,
    Message,
    Pagination,
    Select,
    Table,
    Upload,
} from '@alifd/next';
import BatchHandle from 'components/BatchHandle';
import RegionGroup from 'components/RegionGroup';
import ShowCodeing from 'components/ShowCodeing';
import DeleteDialog from 'components/DeleteDialog';
import DashboardCard from './DashboardCard';
import {getParams, request, setParams} from '@/globalLib';

import './index.scss';
import {LANGUAGE_KEY} from '../../../constants';

const {Panel} = Collapse;
const {Row, Col} = Grid;
const configsTableSelected = new Map();

@ConfigProvider.config
class ConfigurationManagement extends React.Component {
    static displayName = 'ConfigurationManagement';

    static propTypes = {
        locale: PropTypes.object,
        history: PropTypes.object,
    };

    constructor(props) {
        super(props);
        this.deleteDialog = React.createRef();
        this.showcode = React.createRef();
        this.field = new Field(this);
        this.appName = getParams('appName') || getParams('edasAppId') || '';
        this.preAppName = this.appName;
        this.group = getParams('group') || '';
        this.preGroup = this.group;
        this.dataId = getParams('dataId') || '';
        this.preDataId = this.dataId;
        this.serverId = getParams('serverId') || 'center';
        this.edasAppId = getParams('edasAppId') || '';
        this.edasAppName = getParams('edasAppName') || '';
        this.inApp = this.edasAppId;
        this.state = {
            value: '',
            visible: false,
            total: 0,
            pageSize: 10,
            currentPage: 1,
            dataSource: [],
            fieldValue: [],
            showAppName: false,
            showgroup: false,
            dataId: this.dataId,
            group: this.group,
            appName: this.appName,
            config_tags: [],
            tagLst: [],
            selectValue: [],
            loading: false,
            groupList: [],
            groups: [],
            tenant: true,
            nownamespace_id: window.nownamespace || '',
            nownamespace_name: window.namespaceShowName || '',
            selectedRecord: [],
            selectedKeys: [],
            hasdash: false,
            isCn: true,
            contentList: [],
            isAdvancedQuery: false,
            isCheckAll: false,
            rowSelection: {
                onChange: this.configDataTableOnChange.bind(this),
                selectedRowKeys: [],
            },
        };
        const obj = {
            dataId: this.dataId || '',
            group: this.preGroup || '',
            appName: this.appName || '',
        };
        setParams(obj);
        this.batchHandle = null;
        this.toggleShowQuestionnaire = this.toggleShowQuestionnaire.bind(this);
    }

    componentDidMount() {
        const {locale = {}} = this.props;
        // this.getGroup();
        this.setIsCn();
        if (window._getLink && window._getLink('isCn') === 'true') {
            if (!this.checkQuestionnaire()) {
                if (window.location.host === 'acm.console.aliyun.com') {
                    Dialog.alert({
                        title: locale.questionnaire2,
                        style: {
                            width: '60%',
                        },
                        content: (
                            < div >
                            < div style = {
                    {
                        fontSize: '15px', lineHeight
                    :
                        '22px'
                    }
                }>
                    {
                        locale.ad
                    }
                <
                    a
                    href = {'https://survey.aliyun.com/survey/k0BjJ2ARC'}
                    target = {'_blank'} >
                        {locale.questionnaire2}
                        < /a>
                        < /div>
                        < div
                    style = {
                    {
                        fontSize: '15px'
                    }
                }>
                    {
                        locale.noLongerDisplay4
                    }
                <
                    Checkbox
                    onChange = {this.toggleShowQuestionnaire}
                    />
                    < /div>
                    < /div>
                ),
                })
                    ;
                }
            }
        }
    }

    setIsCn() {
        this.setState({isCn: localStorage.getItem(LANGUAGE_KEY) === 'zh-CN'});
    }

    /**
     * 获取概览页数据
     */
    getContentList() {
        request({
            url: 'com.alibaba.nacos.service.dashlist', // 以 com.alibaba. 开头最终会转换为真正的url地址
            data: {},
            $data: {}, // 替换请求url路径中{}占位符的内容
            success: res => {
                if (res.code === 200 && res.data) {
                    if (res.data.length === 0) {
                        this.setState({
                            hasdash: false,
                        });
                    } else {
                        this.setState({
                            hasdash: true,
                            contentList: res.data,
                        });
                    }
                }
            },
        });
    }

    toggleShowQuestionnaire(value) {
        if (value) {
            localStorage.setItem('acm_questionnaire', 1);
        } else {
            localStorage.removeItem('acm_questionnaire');
        }
    }

    checkQuestionnaire() {
        const acm_questionnaire = localStorage.getItem('acm_questionnaire');
        if (acm_questionnaire) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * 回车事件
     */
    keyDownSearch(e) {
        const theEvent = e || window.event;
        const code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code === 13) {
            this.getData();
            return false;
        }
        return true;
    }

    navTo(url, record) {
        this.serverId = getParams('serverId') || '';
        this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
        this.props.history.push(
            `${url}?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${
                record.group
            }&namespace=${this.tenant}`
        );
    }

    openLoading() {
        this.setState({
            loading: true,
        });
    }

    closeLoading() {
        this.setState({
            loading: false,
        });
    }

    UNSAFE_componentWillMount() {
        window.addEventListener('keydown', this.keyDownSearch.bind(this), false);
    }

    componentWillUnmount() {
        window.removeEventListener('keydown', this.keyDownSearch.bind(this));
    }

    onSearch() {
    }

    onChange() {
    }

    cleanAndGetData(needclean = false) {
        if (needclean) {
            this.dataId = '';
            this.group = '';
            this.setState({
                group: '',
                dataId: '',
            });
            setParams({
                group: '',
                dataId: '',
            });
        }
        this.getData();
        configsTableSelected.clear();
        const {rowSelection} = this.state;
        rowSelection.selectedRowKeys = [];
        this.setState({rowSelection});
    }

    getData(pageNo = 1, clearSelect = true) {
        const self = this;
        this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
        this.serverId = getParams('serverId') || '';
        let urlPrefix = '';
        if (this.dataId.indexOf('*') !== -1 || this.group.indexOf('*') !== -1) {
            urlPrefix = 'v1/cs/configs?search=blur';
        } else {
            urlPrefix = 'v1/cs/configs?search=accurate';
        }

        request({
            url: `${urlPrefix}&dataId=${this.dataId}&group=${this.group}&appName=${
                this.appName
            }&config_tags=${this.state.config_tags || ''}&pageNo=${pageNo}&pageSize=${
                this.state.pageSize
            }`,
            beforeSend() {
                self.openLoading();
            },
            success(data) {
                if (data != null) {
                    self.setState({
                        dataSource: data.pageItems,
                        total: data.totalCount,
                        currentPage: data.pageNumber,
                    });
                    if (clearSelect) {
                        self.setState({
                            selectedRecord: [],
                            selectedKeys: [],
                        });
                    }
                }
                self.setState({
                    tenant: self.tenant,
                });
            },
            error(data) {
                self.setState({
                    dataSource: [],
                    total: 0,
                    currentPage: 0,
                });
            },
            complete() {
                self.closeLoading();
            },
        });
    }

    showMore() {
    }

    chooseNav(record, key) {
        const self = this;
        switch (key) {
            case 'nav1':
                self.navTo('/historyRollback', record);
                break;
            case 'nav2':
                self.navTo('/pushTrajectory', record);
                break;
            default:
            case 'nav3':
                self.navTo('/listeningToQuery', record);
                break;
        }
    }

    removeConfig(record) {
        const {locale = {}} = this.props;
        const self = this;
        Dialog.confirm({
            title: locale.removeConfiguration,
            content: (
                < div style = {
        {
            marginTop: '-20px'
        }
    }>
    <
        h3 > {locale.sureDelete} < /h3>
        < p >
        < span
        style = {
        {
            color: '#999', marginRight
        :
            5
        }
    }>
        Data
        ID:<
        /span>
        < span
        style = {
        {
            color: '#c7254e'
        }
    }>
        {
            record.dataId
        }
    <
        /span>
        < /p>
        < p >
        < span
        style = {
        {
            color: '#999', marginRight
        :
            5
        }
    }>
        Group:<
        /span>
        < span
        style = {
        {
            color: '#c7254e'
        }
    }>
        {
            record.group
        }
    <
        /span>
        < /p>
        < p >
        < span
        style = {
        {
            color: '#999', marginRight
        :
            5
        }
    }>
        {
            locale.environment
        }
    <
        /span>
        < span
        style = {
        {
            color: '#c7254e'
        }
    }>
        {
            self.serverId || ''
        }
    <
        /span>
        < /p>
        < /div>
    ),
        onOk: () => {
            const url = `v1/cs/configs?dataId=${record.dataId}&group=${record.group}`;
            request({
                url,
                type: 'delete',
                success(res) {
                    const _payload = {};

                    _payload.title = locale.configurationManagement;
                    _payload.content = '';
                    _payload.dataId = record.dataId;
                    _payload.group = record.group;
                    if (res === true) {
                        _payload.isok = true;
                    } else {
                        _payload.isok = false;
                        _payload.message = res.message;
                    }
                    self.deleteDialog.current.getInstance().openDialog(_payload);
                    self.getData();
                },
            });
        },
    })
        ;
    }

    renderLastTime(value, index, record) {
        return
    <
        div > {aliwareIntl.intlNumberFormat(record.lastModifiedTime)} < /div>;
    }

    showCode(record) {
        this.showcode.current.getInstance().openDialog(record);
    }

    renderCol(value, index, record) {
        const {locale = {}} = this.props;
        return (
            < div >
            < a
        onClick = {this.goDetail.bind(this, record)}
        style = {
        {
            marginRight: 5
        }
    }>
        {
            locale.details
        }
    <
        /a>
        < span
        style = {
        {
            marginRight: 5
        }
    }>|<
        /span>
        < a
        style = {
        {
            marginRight: 5
        }
    }
        onClick = {this.showCode.bind(this, record)} >
            {locale.sampleCode}
            < /a>
            < span
        style = {
        {
            marginRight: 5
        }
    }>|<
        /span>
        < a
        style = {
        {
            marginRight: 5
        }
    }
        onClick = {this.goEditor.bind(this, record)} >
            {locale.edit}
            < /a>
            < span
        style = {
        {
            marginRight: 5
        }
    }>|<
        /span>
        < a
        style = {
        {
            marginRight: 5
        }
    }
        onClick = {this.removeConfig.bind(this, record)} >
            {locale.deleteAction}
            < /a>
            < span
        style = {
        {
            marginRight: 5
        }
    }>|<
        /span>

        < Dropdown
        trigger = {
            < span
        style = {
        {
            color: '#33cde5'
        }
    }>
        {
            locale.more
        }
    <
        Icon
        type = {'arrow-down-filling'}
        size = {'xxs'}
        />
        < /span>
    }
        triggerType = {'click'}
            >
            < Menu
        onItemClick = {this.chooseNav.bind(this, record)} >
            < Menu.Item
        key = {'nav1'} > {locale.version} < /Menu.Item>
            < Menu.Item
        key = {'nav3'} > {locale.listenerQuery} < /Menu.Item>
            < /Menu>
            < /Dropdown>
            < /div>
    )
        ;
    }

    changePage(value) {
        this.setState(
            {
                currentPage: value,
            },
            () => {
                this.getData(value, false);
            }
        );
    }

    handlePageSizeChange(pageSize) {
        this.setState(
            {
                pageSize,
            },
            () => {
                this.changePage(1);
            }
        );
    }

    onInputUpdate() {
    }

    chooseFieldChange(fieldValue) {
        this.setState({
            fieldValue,
        });
    }

    showSelect(value) {
        this.setState({
            selectValue: value,
        });
        if (value.indexOf('appName') !== -1) {
            this.setState({
                showAppName: true,
            });
        } else {
            this.setState({
                showAppName: false,
            });
        }
        if (value.indexOf('group') !== -1) {
            this.setState({
                showgroup: true,
            });
        } else {
            this.setState({
                showgroup: false,
            });
        }
        this.chooseFieldChange(value);
    }

    getAppName(value) {
        this.appName = value;
        this.setState({
            appName: value,
        });
    }

    setAppName(value) {
        this.appName = value;
        this.setState({
            appName: value,
        });
    }

    getDataId(value) {
        this.dataId = value;
        this.setState({
            dataId: value,
        });
    }

    setConfigTags(value) {
        this.setState({
            config_tags: value,
        });
    }

    /**
     * groupId赋值
     */
    setGroup(value) {
        this.group = value || '';
        this.setState({
            group: value || '',
        });
    }

    selectAll() {
        setParams('dataId', this.dataId);
        setParams('group', this.group);
        setParams('appName', this.appName);
        this.getData();
    }

    resetAll() {
        this.dataId = '';
        this.appName = '';
        this.group = '';
        this.setState({
            selectValue: [],
            dataId: '',
            appName: '',
            group: '',
            showAppName: false,
            showgroup: false,
        });
        this.selectAll();
    }

    chooseEnv(value) {
        this.serverId = getParams('serverId') || 'center';
        this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
        this.props.history.push(
            `/newconfig?serverId=${this.serverId || ''}&namespace=${this.tenant}&edasAppName=${
                this.edasAppName
            }&edasAppId=${this.edasAppId}&searchDataId=${this.dataId}&searchGroup=${this.group}`
        );
    }

    setNowNameSpace(name, id) {
        this.setState({
            nownamespace_name: name,
            nownamespace_id: id,
        });
    }

    goDetail(record) {
        this.serverId = getParams('serverId') || 'center';
        this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
        // 点击详情到另一个页面, 返回时候要保留原来的搜索条件 比如: record.dataId为详情的, this.dataId为搜索条件的.
        this.props.history.push(
            `/configdetail?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${
                record.group
            }&namespace=${this.tenant}&edasAppName=${this.edasAppName}&searchDataId=${
                this.dataId
            }&searchGroup=${this.group}`
        );
    }

    goEditor(record) {
        this.serverId = getParams('serverId') || 'center';
        this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
        this.props.history.push(
            `/configeditor?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${
                record.group
            }&namespace=${this.tenant}&edasAppName=${this.edasAppName}&edasAppId=${
                this.edasAppId
            }&searchDataId=${this.dataId}&searchGroup=${this.group}`
        );
    }

    goConfigSync(record) {
        this.serverId = getParams('serverId') || 'center';
        this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
        this.props.history.push(
            `/configsync?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${
                record.group
            }&namespace=${this.tenant}`
        );
    }

    onSelectChange(...args) {
        const record = [];
        args[1].forEach(item => {
            if (args[0].indexOf(item.id) >= 0 && this.state.selectedKeys.indexOf(item.id) < 0) {
                record.push(item);
            }
        });
        this.state.selectedRecord.forEach(item => {
            if (args[0].indexOf(item.id) >= 0) {
                record.push(item);
            }
        });
        this.setState({
            selectedRecord: record,
            selectedKeys: args[0],
            isCheckAll: record.length > 0 && record.length === this.state.dataSource.length,
        });
    }

    onPageSelectAll(selected, records) {
    }

    getBatchFailedContent(res) {
        const {locale = {}} = this.props;
        return (
            < div >
            < div
        style = {
        {
            fontSize: 18, color
        :
            '#373D41', overflow
        :
            'auto'
        }
    }>
        {
            res.message
        }
    <
        /div>
        {
            'data' in res && res.data != null && (
            < Collapse
            style = {
            {
                width: '500px'
            }
        }>
            {
                'failedItems' in res.data && res.data.failedItems.length > 0 ? (
                    < Panel title = {locale.failedEntry + res.data.failedItems.length} >
                    < Table
                dataSource = {res.data.failedItems}
                fixedHeader
                maxBodyHeight = {400} >
                    < Table.Column
                title = {'Data ID'}
                dataIndex = {'dataId'}
                />
                < Table.Column
                title = {'Group'}
                dataIndex = {'group'}
                />
                < /Table>
                < /Panel>
            ) :
                (
                < Panel
                style = {
                {
                    display: 'none'
                }
            }
                />
            )
            }
            {
                'succeededItems' in res.data && res.data.succeededItems.length > 0 ? (
                    < Panel title = {locale.successfulEntry + res.data.succeededItems.length} >
                    < Table
                dataSource = {res.data.succeededItems}
                fixedHeader
                maxBodyHeight = {400} >
                    < Table.Column
                title = {'Data ID'}
                dataIndex = {'dataId'}
                />
                < Table.Column
                title = {'Group'}
                dataIndex = {'group'}
                />
                < /Table>
                < /Panel>
            ) :
                (
                < Panel
                style = {
                {
                    display: 'none'
                }
            }
                />
            )
            }
            {
                'unprocessedItems' in res.data && res.data.unprocessedItems.length > 0 ? (
                    < Panel title = {locale.unprocessedEntry + res.data.unprocessedItems.length} >
                    < Table
                dataSource = {res.data.unprocessedItems}
                fixedHeader
                maxBodyHeight = {400} >
                    < Table.Column
                title = {'Data ID'}
                dataIndex = {'dataId'}
                />
                < Table.Column
                title = {'Group'}
                dataIndex = {'group'}
                />
                < /Table>
                < /Panel>
            ) :
                (
                < Panel
                style = {
                {
                    display: 'none'
                }
            }
                />
            )
            }
        <
            /Collapse>
        )
        }
    <
        /div>
    )
        ;
    }

    onClickBatchHandle() {
        this.batchHandle &&
        this.batchHandle.openDialog({
            serverId: this.serverId,
            group: this.group,
            dataId: this.dataId,
            appName: this.appName,
            config_tags: this.state.config_tags || '',
            pageSize: this.state.pageSize,
        });
    }

    changeAdvancedQuery = () => {
        this.setState({
            isAdvancedQuery: !this.state.isAdvancedQuery,
        });
    };

    checkAllHandle(checked) {
        this.setState({
            isCheckAll: checked,
            selectedKeys: checked ? this.state.dataSource.map(item => item.id) : [],
            selectedRecord: checked ? this.state.dataSource : [],
        });
    }

    exportData() {
        let url =
            `v1/cs/configs?export=true&group=${this.group}&tenant=${getParams('namespace')}&appName=${
                this.appName
            }&ids=&dataId=` + this.dataId;
        window.location.href = url;
    }

    exportSelectedData() {
        const {locale = {}} = this.props;
        if (configsTableSelected.size === 0) {
            Dialog.alert({
                title: locale.exportSelectedAlertTitle,
                content: locale.exportSelectedAlertContent,
            });
        } else {
            let idsStr = '';
            configsTableSelected.forEach((value, key, map) => {
                idsStr = `${idsStr + key},`;
            });
            let url = `v1/cs/configs?export=true&group=&tenant=&appName=&ids=${idsStr}`;
            window.location.href = url;
        }
    }

    multipleSelectionDeletion() {
        const {locale = {}} = this.props;
        const self = this;
        if (configsTableSelected.size === 0) {
            Dialog.alert({
                title: locale.delSelectedAlertTitle,
                content: locale.delSelectedAlertContent,
            });
        } else {
            let toShowDatas = [];
            configsTableSelected.forEach((value, key, map) => {
                let item = {};
                item.dataId = value.dataId;
                item.group = value.group;
                toShowDatas.push(item);
            });
            Dialog.confirm({
                title: locale.removeConfiguration,
                content: (
                    < div style = {
            {
                marginTop: '-20px'
            }
        }>
        <
            h3 > {locale.sureDelete} < /h3>
            < Table
            dataSource = {toShowDatas} >
                < Table.Column
            title = "Data Id"
            dataIndex = "dataId" / >
                < Table.Column
            title = "Group"
            dataIndex = "group" / >
                < /Table>
                < /div>
        ),
            onOk: () => {
                let idsStr = '';
                configsTableSelected.forEach((value, key, map) => {
                    idsStr = `${idsStr + key},`;
                });
                const url = `v1/cs/configs?delType=ids&ids=${idsStr}`;
                request({
                    url,
                    type: 'delete',
                    success(res) {
                        Message.success(locale.delSuccessMsg);
                        self.getData();
                    },
                });
            },
        })
            ;
        }
    }

    cloneSelectedDataConfirm() {
        const {locale = {}} = this.props;
        const self = this;
        self.field.setValue('sameConfigPolicy', 'ABORT');
        self.field.setValue('cloneTargetSpace', undefined);
        if (configsTableSelected.size === 0) {
            Dialog.alert({
                title: locale.cloneSelectedAlertTitle,
                content: locale.cloneSelectedAlertContent,
            });
            return;
        }
        request({
            url: 'v1/console/namespaces?namespaceId=',
            beforeSend() {
                self.openLoading();
            },
            success(data) {
                if (!data || data.code !== 200 || !data.data) {
                    Dialog.alert({
                        title: locale.getNamespaceFailed,
                        content: locale.getNamespaceFailed,
                    });
                }
                let namespaces = data.data;
                let namespaceSelectData = [];
                namespaces.forEach(item => {
                    if (self.state.nownamespace_id !== item.namespace) {
                        let dataItem = {};
                        if (item.namespaceShowName === 'public') {
                            dataItem.label = 'public | public';
                            dataItem.value = 'public';
                        } else {
                            dataItem.label = `${item.namespaceShowName} | ${item.namespace}`;
                            dataItem.value = item.namespace;
                        }
                        namespaceSelectData.push(dataItem);
                    }
                });
                const cloneConfirm = Dialog.confirm({
                    title: locale.cloningConfiguration,
                    footer: false,
                    content: (
                        < div >
                        < div style = {
                {
                    marginBottom: 10
                }
            }>
            <
                span
                style = {
                {
                    color: '#999', marginRight
                :
                    5
                }
            }>
                {
                    locale.source
                }
            <
                /span>
                < span
                style = {
                {
                    color: '#49D2E7'
                }
            }>
                {
                    self.state.nownamespace_name
                }
            <
                /span>|{' '}
                {
                    self.state.nownamespace_id
                }
            <
                /div>
                < div
                style = {
                {
                    marginBottom: 10
                }
            }>
            <
                span
                style = {
                {
                    color: '#999', marginRight
                :
                    5
                }
            }>
                {
                    locale.configurationNumber
                }
            <
                /span>
                < span
                style = {
                {
                    color: '#49D2E7'
                }
            }>
                {
                    configsTableSelected.size
                }
            <
                /span>
                {
                    locale.selectedEntry
                }
            <
                /div>
                < div
                style = {
                {
                    marginBottom: 10
                }
            }>
            <
                span
                style = {
                {
                    color: 'red', marginRight
                :
                    2, marginLeft
                :
                    -10
                }
            }>
                {
                    '*'
                }
            <
                /span>
                < span
                style = {
                {
                    color: '#999', marginRight
                :
                    5
                }
            }>
                {
                    locale.target
                }
            <
                /span>
                < Select
                style = {
                {
                    width: 450
                }
            }
                placeholder = {locale.selectNamespace}
                size = {'medium'}
                hasArrow
                showSearch
                hasClear = {false}
                mode = "single"
                dataSource = {namespaceSelectData}
                onChange = {(value, actionType, item)
            =>
                {
                    if (value) {
                        document.getElementById('cloneTargetSpaceSelectErr').style.display = 'none';
                        self.field.setValue('cloneTargetSpace', value);
                    }
                }
            }
                />
                < br / >
                < span
                id = {'cloneTargetSpaceSelectErr'}
                style = {
                {
                    color: 'red', display
                :
                    'none'
                }
            }>
                {
                    locale.selectNamespace
                }
            <
                /span>
                < /div>
                < div
                style = {
                {
                    marginBottom: 10
                }
            }>
            <
                span
                style = {
                {
                    color: '#999', marginRight
                :
                    5
                }
            }>
                {
                    locale.samePreparation
                }
            :<
                /span>
                < Select
                style = {
                {
                    width: 130
                }
            }
                size = {'medium'}
                hasArrow
                mode = "single"
                filterLocal = {false}
                defaultValue = {'ABORT'}
                dataSource = {
                    [
                        {
                            label: locale.abortImport,
                            value: 'ABORT',
                        },
                {
                    label: locale.skipImport,
                        value
                :
                    'SKIP',
                }
            ,
                {
                    label: locale.overwriteImport,
                        value
                :
                    'OVERWRITE',
                }
            ,
            ]
            }
                hasClear = {false}
                onChange = {(value, actionType, item)
            =>
                {
                    if (value) {
                        self.field.setValue('sameConfigPolicy', value);
                    }
                }
            }
                />
                < /div>
                < div >
                < Button
                type = {'primary'}
                style = {
                {
                    marginRight: 10
                }
            }
                onClick = {()
            =>
                {
                    if (!self.field.getValue('cloneTargetSpace')) {
                        document.getElementById('cloneTargetSpaceSelectErr').style.display = 'inline';
                        return;
                    } else {
                        document.getElementById('cloneTargetSpaceSelectErr').style.display = 'none';
                    }
                    let idsStr = '';
                    configsTableSelected.forEach((value, key, map) => {
                        idsStr = `${idsStr + key},`;
                    });
                    let cloneTargetSpace = self.field.getValue('cloneTargetSpace');
                    let sameConfigPolicy = self.field.getValue('sameConfigPolicy');
                    request({
                        url: `v1/cs/configs?clone=true&tenant=${cloneTargetSpace}&policy=${sameConfigPolicy}&ids=${idsStr}`,
                        beforeSend() {
                            self.openLoading();
                        },
                        success(ret) {
                            self.processImportAndCloneResult(ret, locale, cloneConfirm, false);
                        },
                        error(data) {
                            self.setState({
                                dataSource: [],
                                total: 0,
                                currentPage: 0,
                            });
                        },
                        complete() {
                            self.closeLoading();
                        },
                    });
                }
            }
                data - spm - click = {'gostr=/aliyun;locaid=doClone'}
                    >
                    {locale.startCloning}
                    < /Button>
                    < /div>
                    < /div>
            ),
            })
                ;
            },
            error(data) {
                self.setState({
                    dataSource: [],
                    total: 0,
                    currentPage: 0,
                });
            },
            complete() {
                self.closeLoading();
            },
        });
    }

    processImportAndCloneResult(ret, locale, confirm, isImport) {
        const resultCode = ret.code;
        if (resultCode === 200) {
            confirm.hide();
            if (ret.data.failData && ret.data.failData.length > 0) {
                Dialog.alert({
                    title: isImport ? locale.importAbort : locale.cloneAbort,
                    content: (
                        < div style = {
                {
                    width: '500px'
                }
            }>
            <
                h4 >
                {locale.conflictConfig}：{
                    ret.data.failData[0].group
                }
                /{ret.data.failData[0].dataId}
                < /h4>
                < div
                style = {
                {
                    marginTop: 20
                }
            }>
            <
                h5 >
                {locale.failureEntries}
            :
                {
                    ret.data.failData.length
                }
            <
                /h5>
                < Table
                dataSource = {ret.data.failData} >
                    < Table.Column
                title = "Data Id"
                dataIndex = "dataId" / >
                    < Table.Column
                title = "Group"
                dataIndex = "group" / >
                    < /Table>
                    < /div>
                    < div >
                    < h5 >
                    {locale.unprocessedEntries}
            :
                {
                    ret.data.skipData ? ret.data.skipData.length : 0
                }
            <
                /h5>
                < Table
                dataSource = {ret.data.skipData} >
                    < Table.Column
                title = "Data Id"
                dataIndex = "dataId" / >
                    < Table.Column
                title = "Group"
                dataIndex = "group" / >
                    < /Table>
                    < /div>
                    < /div>
            ),
            })
                ;
            } else if (ret.data.skipCount && ret.data.skipCount > 0) {
                Dialog.alert({
                    title: isImport ? locale.importSucc : locale.cloneSucc,
                    content: (
                        < div style = {
                {
                    width: '500px'
                }
            }>
            <
                div >
                < h5 >
                {locale.skippedEntries}
            :
                {
                    ret.data.skipData.length
                }
            <
                /h5>
                < Table
                dataSource = {ret.data.skipData} >
                    < Table.Column
                title = "Data Id"
                dataIndex = "dataId" / >
                    < Table.Column
                title = "Group"
                dataIndex = "group" / >
                    < /Table>
                    < /div>
                    < /div>
            ),
            })
                ;
            } else {
                let message = `${isImport ? locale.importSuccBegin : locale.cloneSuccBegin}${
                    ret.data.succCount
                }${isImport ? locale.importSuccEnd : locale.cloneSuccEnd}`;
                Message.success(message);
            }
            this.getData();
        } else {
            let alertContent = isImport ? locale.importFailMsg : locale.cloneFailMsg;
            if (resultCode === 100001) {
                alertContent = locale.namespaceNotExist;
            }
            if (resultCode === 100002) {
                alertContent = locale.metadataIllegal;
            }
            if (resultCode === 100003 || resultCode === 100004 || resultCode === 100005) {
                alertContent = locale.importDataValidationError;
            }
            Dialog.alert({
                title: isImport ? locale.importFail : locale.cloneFail,
                content: alertContent,
            });
        }
    }

    importData() {
        const {locale = {}} = this.props;
        const self = this;
        self.field.setValue('sameConfigPolicy', 'ABORT');
        const uploadProps = {
            accept: 'application/zip',
            action: `v1/cs/configs?import=true&namespace=${getParams('namespace')}`,
            data: {
                policy: self.field.getValue('sameConfigPolicy'),
            },
            beforeUpload(file, options) {
                options.data = {
                    policy: self.field.getValue('sameConfigPolicy'),
                };
                return options;
            },
            onSuccess(ret) {
                self.processImportAndCloneResult(ret.response, locale, importConfirm, true);
            },
            onError(err) {
                Dialog.alert({
                    title: locale.importFail,
                    content: locale.importDataValidationError,
                });
            },
        };
        const importConfirm = Dialog.confirm({
            title: locale.import,
            footer: false,
            content: (
                < div >
                < div style = {
        {
            marginBottom: 10
        }
    }>
    <
        span
        style = {
        {
            color: '#999', marginRight
        :
            5
        }
    }>
        {
            locale.targetNamespace
        }
    :<
        /span>
        < span
        style = {
        {
            color: '#49D2E7'
        }
    }>
        {
            this.state.nownamespace_name
        }
    <
        /span>|{' '}
        {
            this.state.nownamespace_id
        }
    <
        /div>
        < div
        style = {
        {
            marginBottom: 10
        }
    }>
    <
        span
        style = {
        {
            color: '#999', marginRight
        :
            5
        }
    }>
        {
            locale.samePreparation
        }
    :<
        /span>
        < Select
        style = {
        {
            width: 130
        }
    }
        size = {'medium'}
        hasArrow
        mode = "single"
        filterLocal = {false}
        defaultValue = {'ABORT'}
        dataSource = {
            [
                {
                    label: locale.abortImport,
                    value: 'ABORT',
                },
        {
            label: locale.skipImport,
                value
        :
            'SKIP',
        }
    ,
        {
            label: locale.overwriteImport,
                value
        :
            'OVERWRITE',
        }
    ,
    ]
    }
        hasClear = {false}
        onChange = {
            function(value, actionType, item) {
                self.field.setValue('sameConfigPolicy', value);
            }
        }
        />
        < /div>
        < div
        style = {
        {
            marginBottom: 10
        }
    }>
    <
        Icon
        type = "prompt"
        style = {
        {
            color: '#FFA003', marginRight
        :
            '10px'
        }
    }
        />
        {
            locale.importRemind
        }
    <
        /div>
        < div >
        < Upload
        name = {'file'}
        listType = "text"
        data - spm - click = {'gostr=/aliyun;locaid=configsImport'}
        {...
            uploadProps
        }
    >
    <
        Button
        type = "primary" > {locale.uploadBtn} < /Button>
            < /Upload>
            < /div>
            < /div>
    ),
    })
        ;
    }

    configDataTableOnChange(ids, records) {
        const {rowSelection} = this.state;
        rowSelection.selectedRowKeys = ids;
        this.setState({rowSelection});
        configsTableSelected.clear();
        ids.forEach((id, i) => {
            configsTableSelected.set(id, id);
        });
    }

    render() {
        const {locale = {}} = this.props;
        return (
            < div >
            < BatchHandle
        ref = {ref
    =>
        (this.batchHandle = ref)
    }
        />
        < Loading
        shape = {'flower'}
        style = {
        {
            position: 'relative', width
        :
            '100%', overflow
        :
            'auto'
        }
    }
        visible = {this.state.loading}
        tip = {'Loading...'}
        color = {'#333'}
            >
            < div
        className = {this.state.hasdash ? 'dash-page-container' : ''} >
            < div
        className = {this.state.hasdash ? 'dash-left-container' : ''}
        style = {
        {
            position: 'relative', padding
        :
            10
        }
    }
    >
    <
        div
        style = {
        {
            display: this.inApp ? 'none' : 'block', marginTop
        :
            -15
        }
    }>
    <
        RegionGroup
        namespaceCallBack = {this.cleanAndGetData.bind(this)}
        setNowNameSpace = {this.setNowNameSpace.bind(this)}
        />
        < /div>
        < div
        style = {
        {
            display: this.inApp ? 'none' : 'block',
                position
        :
            'relative',
                width
        :
            '100%',
                overflow
        :
            'hidden',
                height
        :
            '40px',
        }
    }
    >
    <
        h3
        style = {
        {
            height: 30,
                width
        :
            '100%',
                lineHeight
        :
            '30px',
                padding
        :
            0,
                margin
        :
            0,
                paddingLeft
        :
            10,
                borderLeft
        :
            '3px solid #09c',
                color
        :
            '#ccc',
                fontSize
        :
            '12px',
        }
    }
    >
    <
        span
        style = {
        {
            fontSize: '14px', color
        :
            '#000', marginRight
        :
            8
        }
    }>
        {
            locale.configurationManagement8
        }
    <
        /span>
        < span
        style = {
        {
            fontSize: '14px', color
        :
            '#000', marginRight
        :
            8
        }
    }>|<
        /span>
        < span
        style = {
        {
            fontSize: '14px', color
        :
            '#000', marginRight
        :
            8
        }
    }>
        {
            this.state.nownamespace_name
        }
    <
        /span>
        < span
        style = {
        {
            fontSize: '14px', color
        :
            '#000', marginRight
        :
            18
        }
    }>
        {
            this.state.nownamespace_id
        }
    <
        /span>
        {
            locale.queryResults
        }
    <
        strong
        style = {
        {
            fontWeight: 'bold'
        }
    }>
        {
            this.state.total
        }
    <
        /strong>
        {
            locale.articleMeetRequirements
        }
    <
        /h3>
        < div
        style = {
        {
            position: 'absolute', textAlign
        :
            'right', zIndex
        :
            2, right
        :
            0, top
        :
            0
        }
    }
        />
        < /div>
        < div
        style = {
        {
            position: 'relative',
                marginTop
        :
            10,
                height
        :
            this.state.isAdvancedQuery ? 'auto' : 42,
                overflow
        :
            'hidden',
        }
    }
    >
    <
        Form
        inline >
        < Form.Item
        label = {'Data ID:'} >
            < Input
        htmlType = {'text'}
        placeholder = {locale.fuzzyd}
        style = {
        {
            width: 200
        }
    }
        value = {this.state.dataId}
        onChange = {this.getDataId.bind(this)}
        />
        < /Form.Item>

        < Form.Item
        label = {'Group:'} >
            < Select.AutoComplete
        style = {
        {
            width: 200
        }
    }
        size = {'medium'}
        placeholder = {locale.fuzzyg}
        dataSource = {this.state.groups}
        value = {this.state.group}
        onChange = {this.setGroup.bind(this)}
        hasClear
        / >
        < /Form.Item>
        < Form.Item
        label = {''} >
            < Button
        type = {'primary'}
        style = {
        {
            marginRight: 10
        }
    }
        onClick = {this.selectAll.bind(this)}
        data - spm - click = {'gostr=/aliyun;locaid=dashsearch'}
            >
            {locale.query}
            < /Button>
            < /Form.Item>
            < Form.Item
        style = {
                this.inApp
                ? {display: 'none'}
                : {verticalAlign: 'middle', marginTop: 0, marginLeft: 10}
            }
            >
            < div
        style = {
        {
            color: '#33cde5', fontSize
        :
            12, cursor
        :
            'pointer'
        }
    }
        onClick = {this.changeAdvancedQuery}
            >
            < span
        style = {
        {
            marginRight: 5, lineHeight
        :
            '28px'
        }
    }>
        {
            locale.advancedQuery9
        }
    <
        /span>
        < Icon
        type = {
            this.state.isAdvancedQuery ? 'arrow-up-filling' : 'arrow-down-filling'
        }
        size = {'xs'}
        />
        < /div>
        < /Form.Item>
        < Form.Item
        label = {''} >
            < Button
        type = {'primary'}
        style = {
        {
            marginRight: 10
        }
    }
        onClick = {this.exportData.bind(this)}
        data - spm - click = {'gostr=/aliyun;locaid=configsExport'}
            >
            {locale.export}
            < /Button>
            < /Form.Item>
            < Form.Item
        label = {''} >
            < Button
        type = {'primary'}
        style = {
        {
            marginRight: 10
        }
    }
        onClick = {this.importData.bind(this)}
        data - spm - click = {'gostr=/aliyun;locaid=configsExport'}
            >
            {locale.import}
            < /Button>
            < /Form.Item>
            < br / >
            < Form.Item
        style = {this.inApp ? {display: 'none'} : {}}
        label = {locale.application0}
            >
            < Input
        htmlType = {'text'}
        placeholder = {locale.app1}
        style = {
        {
            width: 200
        }
    }
        value = {this.state.appName}
        onChange = {this.setAppName.bind(this)}
        />
        < /Form.Item>
        < Form.Item
        label = {locale.tags} >
            < Select
        style = {
        {
            width: 200
        }
    }
        size = {'medium'}
        hasArrow
        mode = "tag"
        filterLocal = {false}
        placeholder = {locale.pleaseEnterTag}
        dataSource = {this.state.tagLst}
        value = {this.state.config_tags}
        onChange = {this.setConfigTags.bind(this)}
        hasClear
        / >
        < /Form.Item>
        < /Form>
        < div
        style = {
        {
            position: 'absolute', right
        :
            10, top
        :
            4
        }
    }>
    <
        Icon
        type = {'add'}
        size = {'medium'}
        style = {
        {
            color: 'black',
                marginRight
        :
            0,
                verticalAlign
        :
            'middle',
                cursor
        :
            'pointer',
                backgroundColor
        :
            '#eee',
                border
        :
            '1px solid #ddd',
                padding
        :
            '3px 6px',
        }
    }
        onClick = {this.chooseEnv.bind(this)}
        />
        < /div>
        < /div>
        < div >
        < Table
        dataSource = {this.state.dataSource}
        locale = {
        {
            empty: locale.pubNoData
        }
    }
        fixedHeader
        maxBodyHeight = {400}
        ref = {'dataTable'}
        rowSelection = {this.state.rowSelection}
            >
            < Table.Column
        title = {'Data Id'}
        dataIndex = {'dataId'}
        />
        < Table.Column
        title = {'Group'}
        dataIndex = {'group'}
        />
        {
            !this.inApp ? (
                < Table.Column title = {locale.application}
            dataIndex = {'appName'}
            />
        ) :
            (
            < div / >
        )
        }
    <
        Table.Column
        title = {locale.operation}
        cell = {this.renderCol.bind(this)}
        />
        < /Table>
        {
            this.state.dataSource.length > 0 && (
            < div
            style = {
            {
                marginTop: 10, overflow
            :
                'hidden'
            }
        }>
        <
            div
            style = {
            {
                float: 'left'
            }
        }>
        <
            Button
            type = {'primary'}
            warning
            style = {
            {
                marginRight: 10
            }
        }
            onClick = {this.multipleSelectionDeletion.bind(this)}
            data - spm - click = {'gostr=/aliyun;locaid=configsDelete'}
                >
                {locale.deleteAction}
                < /Button>
                < Button
            type = {'primary'}
            style = {
            {
                marginRight: 10
            }
        }
            onClick = {this.exportSelectedData.bind(this)}
            data - spm - click = {'gostr=/aliyun;locaid=configsExport'}
                >
                {locale.exportSelected}
                < /Button>
                < Button
            type = {'primary'}
            style = {
            {
                marginRight: 10
            }
        }
            onClick = {this.cloneSelectedDataConfirm.bind(this)}
            data - spm - click = {'gostr=/aliyun;locaid=configsClone'}
                >
                {locale.clone}
                < /Button>
                < /div>
                < div
            style = {
            {
                float: 'right'
            }
        }>
        <
            Pagination
            style = {
            {
                float: 'right'
            }
        }
            pageSizeList = {[10, 20, 30
        ]
        }
            pageSizeSelector = {'dropdown'}
            onPageSizeChange = {this.handlePageSizeChange.bind(this)}
            current = {this.state.currentPage}
            total = {this.state.total}
            pageSize = {this.state.pageSize}
            onChange = {this.changePage.bind(this)}
            />
            < /div>
            < /div>
        )
        }
    <
        /div>
        < ShowCodeing
        ref = {this.showcode}
        />
        < DeleteDialog
        ref = {this.deleteDialog}
        />
        < /div>
        {
            this.state.hasdash && (
            < div
            className = {'dash-right-container'}
            style = {
            {
                overflow: 'auto', height
            :
                window.innerHeight - 40
            }
        }
        >
            {
                this.state.contentList.map((v, i) => (
                    < DashboardCard
                data = {v}
                height = {'auto'}
                key = {`show${i}`
            }
                />
            ))
            }
        <
            /div>
        )
        }
    <
        /div>
        < /Loading>
        < /div>
    )
        ;
    }
}

export default ConfigurationManagement;
